<template>
  <div class="page bgc-fff">
    <x-header :title="header.title"></x-header>
    <div v-if="classHistoryData.length === 0" class="f14 pad15 mt46 ta-c c-666">
      该车队暂无挂车信息
    </div>
    <v-loadmore v-else :top-method="loadTop" :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded" class="mt46"
                :auto-fill="false" ref="loadmore">
      <div class="add-class-history-item" v-for='(item,index) in classHistoryData' :key='index'>
        <!-- item -->
        <div class="f14 c-333 bgc-fff pad15">
          <div class="flex l-center a-between">
            <div>
              <span class="c-999">挂车车牌：</span>
              <span v-if="item.plate">{{item.plate}}</span>
              <span v-else>暂无</span>
            </div>
            <div>
              <span class="c-999">挂车类型：</span>
              <span v-if='item.trailerTypeName' >{{item.trailerTypeName}}</span>
              <span v-else>暂无</span>
            </div>
          </div>
        </div>
        <!-- 间隔 -->
        <div class="mo-spacing"></div>
      </div>
    </v-loadmore>
    <v-loading v-show="loadingShow"></v-loading>
  </div>
</template>

<script type="text/ecmascript-6">
  import * as FleetApi from '@/api/fleet'
  import { XHeader } from 'vux'
  import { Toast, Loadmore } from 'mint-ui'
  import Loading from '@/components/common/loading/loading'
  import * as SessionS from '@/utils/store/storage'
  export default {
    name: 'me-fleetTarrierList',
    data() {
      return {
        header: {
          title: ''
        },
        staticImgData: {
          timeUrl: require('@/assets/image/v1/user/add_class_history/icon_time.png')
        },
        classHistoryData: [],
        page: {
          current: 1,
          size: 10,
          total: 1,
          condition: {
            fleetId: ''
          }
        },
        loadingShow: false,
        allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      }
    },
    created() {
      const { id, fleetName } = SessionS.getSession('fleetItem')
      this.page.condition.fleetId = id
      this.header.title = fleetName
      this.loadPageList()
    },
    mounted() {
    },
    components: {
      XHeader,
      'v-loading': Loading,
      'v-loadmore': Loadmore
    },
    methods: {
      loadTop: function() { // 组件提供的下拉触发方法
        // 下拉加载
        this.loadingShow = true
        this.allLoaded = false// 刷新时置为true
        this.page.current = 1// 从第1页开始
        this.loadPageList()
        this.$refs.loadmore.onTopLoaded() // 固定方法，查询完要调用一次，用于重新定位
      },
      loadBottom: function() {
        // 上拉加载
        this.loadingShow = true
        this.getMore() // 上拉触发的分页查询
        this.$refs.loadmore.onBottomLoaded() // 固定方法，查询完要调用一次，用于重新定位
      },
      loadPageList: function() {
        // 查询数据
        const that = this
        that.loadingShow = true
        FleetApi.fleetTarrierList(that.page).then(res => {
          // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
          if (res.code === 0) {
            that.classHistoryData = res.data.records
            if (that.page.current > 1) {
              that.isHaveMore(res.data)
            }
            that.loadingShow = false
          } else {
            console.warn('error', res)
            that.loadingShow = false
          }
          that.$nextTick(function() {
            that.scrollMode = 'touch'
          })
        }).catch(res => {
          this.loadingShow = false
          console.warn('error', res)
        })
      },
      getMore: function() {
        // 分页查询
        const that = this
        that.page.current = parseInt(that.page.current) + 1
        FleetApi.fleetTarrierList(that.page).then(res => {
          this.loadingShow = false
          if (res.code === 0) {
            that.classHistoryData = that.classHistoryData.concat(res.data.records)
            if (that.page.current > 1) {
              that.isHaveMore(res.data)
            }
          }
        }).catch(res => {
          this.loadingShow = false
          console.warn('error', res)
        })
      },
      isHaveMore: function(data) {
        // 是否还有下一页，如果没有就禁止上拉刷新
        const that = this
        const now_show_num = that.classHistoryData.length
        const get_total = data.total
        if (now_show_num < get_total) {
          // 展示的条数 小于 后端总条数 还可以下拉加载更多
          this.allLoaded = false
        } else if (now_show_num === get_total) {
          // 展示的条数 等于 后端总条数 没有更多数据 不能进行下拉加载
          this.allLoaded = true
          Toast({
            message: '没有更多数据了',
            duration: 1000
          })
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../styles/util.css';
  /* common */
  .page{
    overflow-y: auto;
  }
</style>
